<template>
  <el-container class="layout">
    <!-- 侧边 -->
    <el-aside
      :width="collapse ? '64px' : '250px'"
      class="aside"
      :style="{ background: sideBackGorund }"
    >
      <el-container>
        <el-header height="48px" class="left-top">
          <router-link :to="{ name: 'home' }">
            <img src="@/assets/logo.png" alt="logo" />
            <h1 v-if="!collapse" :style="{ color: sideColor }">{{ title }}</h1>
          </router-link>
        </el-header>
        <el-main class="left-content">
          <el-scrollbar>
            <my-menu mode="vertical" :collapse="collapse"></my-menu>
          </el-scrollbar>
        </el-main>
        <el-footer height="48px" class="left-bottom">
          <el-icon
            v-if="collapse"
            :color="sideColor"
            :size="25"
            @click="triggerLayoutCollapse"
          >
            <expand />
          </el-icon>
          <el-icon
            v-else
            :color="sideColor"
            :size="25"
            @click="triggerLayoutCollapse"
          >
            <fold />
          </el-icon>
        </el-footer>
      </el-container>
    </el-aside>
    <el-container class="container">
      <!-- 头部 -->
      <el-header height="48px" class="header">
        <div class="header-left">
          <el-icon v-if="collapse" :size="25" @click="triggerLayoutCollapse">
            <expand />
          </el-icon>
          <el-icon v-else :size="25" @click="triggerLayoutCollapse">
            <fold />
          </el-icon>
        </div>
        <div class="header-content"></div>
        <div class="header-right">
          <el-dropdown @command="rightMenuClick">
            <span class="el-dropdown-link">
              <el-icon>
                <Avatar />
              </el-icon>
              {{ username }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="1">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  修改密码
                </el-dropdown-item>
                <el-dropdown-item command="Setting">
                  <el-icon>
                    <setting />
                  </el-icon>
                  系统设置
                </el-dropdown-item>
                <el-dropdown-item command="Logout" divided>
                  <el-icon>
                    <sold-out />
                  </el-icon>

                  退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 内容 -->
      <el-main class="main">
        <my-main></my-main>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import MyMenu from './components/MyMenu'
  import MyMain from './components/MyMain'
  import {
    Fold,
    Expand,
    Avatar,
    Edit,
    Setting,
    SoldOut,
  } from '@element-plus/icons'
  export default {
    name: 'SideMenuLayout', // 侧边菜单布局
    components: {
      MyMenu,
      MyMain,
      Fold,
      Expand,
      Avatar,
      Edit,
      Setting,
      SoldOut,
    },
    data() {
      return {
        title: process.env.VUE_APP_TITLE,
        collapse: false, //是否收缩
        collapsedWidth: 50, //缩进宽度
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        themeStyle: 'user/themeStyle',
        username: 'user/username',
      }),
      // 侧边背景颜色
      sideBackGorund() {
        return this.themeStyle == '1' ? '#fff' : '#000'
      },
      sideColor() {
        return this.themeStyle == '1' ? '#000' : '#fff'
      },
    },
    // 方法
    methods: {
      ...mapActions({
        logout: 'user/logout',
      }),
      // 布局展开收缩切换
      triggerLayoutCollapse() {
        this.collapse = !this.collapse
      },
      // 右侧菜单点击事件
      rightMenuClick(command) {
        switch (command) {
          case 'Setting':
            // 显示系统设置抽屉
            this.$emit('showSettingDrawer')
            break
          case 'Logout':
            // 登出
            this.logout()
            break
          default:
            break
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  $header-height: 48px;
  .layout {
    height: 100%;
    .aside {
      height: 100%;
      .el-container {
        height: 100%;
        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
        .left-top {
          height: $header-height;
          line-height: $header-height;
          padding: 10px 16px;
          box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
          border-right: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;
          align-items: center;
          cursor: pointer;
          a {
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            img {
              display: inline-block;
              height: 20px;
              vertical-align: middle;
            }
            h1 {
              margin: 0 0 0 12px;
              overflow: hidden;
              font-weight: 600;
              font-size: 18px;
            }
          }
        }
        .left-content {
          padding: 0;
          box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
          .el-scrollbar__view {
            height: 100%;
          }
        }
        .left-bottom {
          height: $header-height;
          line-height: $header-height;
          text-align: center;
          border-right: 1px solid #e6e6e6;
          border-top: 1px solid #e6e6e6;
          .el-icon {
            vertical-align: middle;
            cursor: pointer;
            &:hover {
              color: #1890ff;
            }
          }
        }
      }
    }
    .header {
      height: $header-height;
      line-height: $header-height;
      padding: 0 10px;
      box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
      display: flex;
      justify-content: center;
      align-items: center;
      .header-left {
        width: 40px;
        text-align: center;
        .el-icon {
          vertical-align: middle;
          cursor: pointer;
          &:hover {
            color: #1890ff;
          }
        }
      }
      .header-content {
        flex: 1 1 0%;
      }
      .header-right {
        min-width: 120px;
        text-align: center;
      }
    }
    .main {
      box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
      padding: 0;
    }
  }
</style>
